<template>
  <view class="normal-login-container">
	  
	  
		
		
    <view class="logo-content align-center justify-center flex">
      <image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
      </image>
      <text class="title">良品检核登录</text>
	  
    </view>
	<view class="loading-container">
	   <image class="loading-gif" src="/static/images/loading.gif"></image>
	 </view>
    <view class="login-form-content">
      <view class="input-item flex align-center">
        <view class="iconfont icon-user icon"></view>
        <input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
      </view>
      <view class="input-item flex align-center">
        <view class="iconfont icon-password icon"></view>
        <input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
      </view>
      <view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
        <view class="iconfont icon-code icon"></view>
        <input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
        <view class="login-code"> 
          <image :src="codeUrl" @click="getCode" class="login-code-img"></image>
        </view>
      </view>
	
      <view class="action-btn">
        <button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
      </view>
      <view class="reg text-center" v-if="register">
        <text class="text-grey1">没有账号？</text>
        <text @click="handleUserRegister" class="text-blue">立即注册</text>
      </view>
      <view class="xieyi text-center">
        <text class="text-grey1">登录即代表同意</text>
        <text @click="handleUserAgrement" class="text-blue">《用户协议》</text>
        <text @click="handlePrivacy" class="text-blue">《隐私协议》</text>
      </view>
    </view>
     
  </view>
</template>

<script>
  import { getCodeImg,weComAuthorize } from '@/api/login'
 
  export default {
    data() {
      return {
        codeUrl: "",
        captchaEnabled: false,
        // 用户注册开关
        register: false,
        globalConfig: getApp().globalData.config,
        loginForm: {
          username: "",
          password: "",
          code: "",
          uuid: ''
        }
      }
    },
    created() {
    //    this.getCode()
	  this.checkWeChatCode()
    },
    methods: {
		
		
		
		  /*微信登录相关  start*/
		  //方法：用来判断是否是微信内置的浏览器
		  isWechat() {
		    return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
		  },
		  //方法:用来提取code
		  getUrlCode(name) {
		    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) ||[, ''])[1].replace(/\+/g, '%20')) || null
		  },
		  //检查浏览器地址栏中微信接口返回的code
		  checkWeChatCode() {
		    let code = this.getUrlCode('code')
			//  this.$modal.loading("加载中，请稍等...")
			/* uni.showLoading({
			  
			  mask: true,
			  icon: 'image', // 使用自定义图标
			  image: '/static/images/loading.gif', // 自定义图片路径
			  success: function () {
			    // 加载自定义图片样式
			    let toast = document.getElementById('custom-toast');
			    let image = toast.querySelector('.uni-toast-image');
			    // 设置图片宽度
			    image.style.width = '500px'; // 根据需要设置宽度
			  },
			  complete: function () {
			    // 加载完成后处理
			  }
			});
			 */
			
			/* uni.showToast({
			    title: '',
			    icon: 'loading',
			    image: '/static/images/loading.gif', // 图片路径
			    //duration: 2000,
			    mask: true,
			    success: function () {
			       
			    },
			    fail: function (err) {
			        
			    }
			}); */
		    if (code) {
		      this.qwLogin(code);
		      //this.getOpenidAndUserinfo(code)
		    }else{
		     // this.getWeChatCode();
		    }
		  },
		  //请求微信接口，用来获取code
		  //本产品是测试产品。所以将appid、agentid的值直接放到页面当中，开发者可根据需求从服务端获取，这里不再详细赘述
		  getWeChatCode() {			 
		    let local = encodeURIComponent(window.location.href.split("&code")[0]); //获取当前页面地址作为回调地址
		    let appid = 'wwc4f875dca83d8f95'
		    const agentid="1000152";
		    //通过微信官方接口获取code之后，会重新刷新设置的回调地址【redirect_uri】
		    window.location.href =
		      "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
		      appid + 
		      "&redirect_uri=" +
		      local +
		      "&response_type=code&scope=snsapi_privateinfo"+"&agentid="+agentid+"#wechat_redirect";
		  },
		
 
		  async qwLogin(code) {
			  
	 
			  
			  //  this.$modal.loading("加载中，请稍等...")
				
		         this.$store.dispatch('Login', this.loginForm).then(() => {
					 //debugger;
				   this.$modal.closeLoading()
		           this.loginSuccesshj(code)
		         }).catch(() => {
					  this.$modal.loading("授权失败，请确认账号是否开通...")
					    
		           if (this.captchaEnabled) {
		             this.getCode()
		           }
		         })

		  } ,
		
		
		
		

		
      // 用户注册
      handleUserRegister() {
        this.$tab.redirectTo(`/pages/register`)
      },
      // 隐私协议
      handlePrivacy() {
        let site = this.globalConfig.appInfo.agreements[0]
        this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
      },
      // 用户协议
      handleUserAgrement() {
        let site = this.globalConfig.appInfo.agreements[1]
        this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
      },
      // 获取图形验证码
      getCode() {
        getCodeImg().then(res => {
          this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
          if (this.captchaEnabled) {
            this.codeUrl = 'data:image/gif;base64,' + res.img
            this.loginForm.uuid = res.uuid
          }
        })
      },
      // 登录方法
      async handleLogin() {
        if (this.loginForm.username === "") {
          this.$modal.msgError("请输入您的账号")
        } else if (this.loginForm.password === "") {
          this.$modal.msgError("请输入您的密码")
        } else if (this.loginForm.code === "" && this.captchaEnabled) {
          this.$modal.msgError("请输入验证码")
        } else {
          this.$modal.loading("登录中，请耐心等待...")
          this.pwdLogin()
        }
      },
      // 密码登录
      async pwdLogin() {
        this.$store.dispatch('Login', this.loginForm).then(() => {
          this.$modal.closeLoading()
          this.loginSuccess()
        }).catch(() => {
          if (this.captchaEnabled) {
            this.getCode()
          }
        })
      },
      // 登录成功后，处理函数
      loginSuccess(result) {
        // 设置用户信息
		//debugger;
        this.$store.dispatch('GetInfo',result).then(res => {
          this.$tab.reLaunch('/pages/index')
        })
      },
	  // 登录成功后，处理函数
	  loginSuccesshj(result) {
	    // 设置用户信息
	  		//this.$modal.loading("授权成功，跳转中...")
	  		  this.$modal.loading("加载中，请稍等...")
	    this.$store.dispatch('GetInfohj',result).then(res => {
			
	      this.$tab.reLaunch('/pages/index')
	    })
	  }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #ffffff;
  }
  

  .normal-login-container {
    width: 100%;
  .loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20%; /* 根据需要调整高度 */
	  
	    
	
  }
   
  .loading-gif {
    width: 160px; /* 根据GIF动图大小调整宽度 */
    height: 145px; /* 根据GIF动图大小调整高度 */
	  
  }

    .logo-content {
      width: 100%;
      font-size: 21px;
      text-align: center;
      padding-top: 15%;

      image {
        border-radius: 4px;
      }

      .title {
        margin-left: 10px;
      }
    }

    .login-form-content {
      text-align: center;
      margin: 20px auto;
      margin-top: 15%;
      width: 80%;

      .input-item {
        margin: 20px auto;
        background-color: #f5f6f7;
        height: 45px;
        border-radius: 20px;

        .icon {
          font-size: 38rpx;
          margin-left: 10px;
          color: #999;
        }

        .input {
          width: 100%;
          font-size: 14px;
          line-height: 20px;
          text-align: left;
          padding-left: 15px;
        }

      }

      .login-btn {
        margin-top: 40px;
        height: 45px;
      }
      
      .reg {
        margin-top: 15px;
      }
      
      .xieyi {
        color: #333;
        margin-top: 20px;
      }
      
      .login-code {
        height: 38px;
        float: right;
      
        .login-code-img {
          height: 38px;
          position: absolute;
          margin-left: 10px;
          width: 200rpx;
        }
      }
    }
  }

</style>
